<template>
  <div class="barrage-container">
    <Barrage maxWidth="450px" textSize="16px" :maxSize="4" :textLength="200" :initBarrageList="initBarrageList"> </Barrage>
  </div>
</template>

<script>
import Barrage from '../components/Barrage.vue'
export default {
  name: 'MyDemoBarragepage',

  components: {
    Barrage
  },

  data() {
    return {
      initBarrageList: [
        { id: 2, text: '1、在 CSS 过渡和动画中自动应用 class' },
        { id: 3, text: '2、可以配合使用第三方 CSS 动画库，如 Animate.css' },
        { id: 4, text: '3、在过渡钩子函数中使用 JavaScript 直接操作 DOM' },
        { id: 5, text: '4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js' },
        { id: 6, text: '5、v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除' },
        { id: 7, text: '6、v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除' }
      ]
    }
  },

  methods: {}
}
</script>

<style lang="less" scoped>
.barrage-container {
  position: relative;
  height: 100vh;
  background-color: #ee9a75;
  background-image: url('../assets/logo.png');
  background-repeat: no-repeat;
  background-position: center;
}
</style>
